import React, { useState } from 'react'


const Child = () => {

    console.log('Child 组件被执行了');

    return <h1>Child</h1>
}

export default function App() {
    const [count, setCount] = useState(100)
    return (
        <div>
            <h1>App - {count}</h1>

            <button onClick={() => {
                setCount(count + 1)
            }}>点击增加</button>


            <hr />

            {/* 
                每次执行 count 改变的时候，都会导致 Child 组件重新被渲染，但是 count 的改变和
                Child 组件没有任何关系
                如果每次都重新渲染子组件，就会过于浪费资源，所以消耗性能，所以有没有什么办法让 count 
                改变的时候不要重新渲染 Child 组件了
                如何让无关不会被重新渲染
            */}

            <Child />
        </div>
    )
}
